
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
  
  <!-- Basic -->
  <title>Margo | Home</title>
  
  <!-- Define Charset -->
  <meta charset="utf-8">
  
  <!-- Responsive Metatag -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <!-- Page Description and Author -->
  <meta name="description" content="Margo - Responsive HTML5 Template">
  <meta name="author" content="iThemesLab">
  
  <!-- Bootstrap CSS  -->
  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
  
  <!-- Margo CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  
  <!-- Responsive CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
  
  <!-- Css3 Transitions Styles  -->
  <link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
  
  <!-- Color CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
  
  
  
  <!-- Margo JS  -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.migrate.js"></script>
  <script type="text/javascript" src="js/modernizrr.js"></script>
  <script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/jquery.fitvids.js"></script>
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
  <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
  <script type="text/javascript" src="js/jquery.appear.js"></script>
  <script type="text/javascript" src="js/count-to.js"></script>
  <script type="text/javascript" src="js/jquery.textillate.js"></script>
  <script type="text/javascript" src="js/jquery.lettering.js"></script>
  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
  <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
  <script type="text/javascript" src="js/jquery.parallax.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
</head>
<body>

	<!-- Full Body Container -->
    <div id="container">
        
        
        <!-- Start Header Section --> 
        <div class="hidden-header"></div>
        <header class="clearfix">
            
            <!-- Start Top Bar -->
            <div class="top-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- Start Contact Info -->
                            <ul class="contact-details">
                                <li><a href="#"><i class="fa fa-map-marker"></i> House-54/A, London, UK</a>
                                </li>
                                <li><a href="#"><i class="fa fa-envelope-o"></i> info@yourcompany.com</a>
                                </li>
                                <li><a href="#"><i class="fa fa-phone"></i> +12 345 678 000</a>
                                </li>
                            </ul>
                            <!-- End Contact Info -->
                        </div><!-- .col-md-6 -->
                        <div class="col-md-6">
                            <!-- Start Social Links -->
                            <ul class="social-list">
                                <li>
                                    <a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li>
                                    <a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                                <li>
                                    <a class="dribbble itl-tooltip" data-placement="bottom" title="Dribble" href="#"><i class="fa fa-dribbble"></i></a>
                                </li>
                                <li>
                                    <a class="linkdin itl-tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                                </li>
                                <li>
                                    <a class="flickr itl-tooltip" data-placement="bottom" title="Flickr" href="#"><i class="fa fa-flickr"></i></a>
                                </li>
                                <li>
                                    <a class="tumblr itl-tooltip" data-placement="bottom" title="Tumblr" href="#"><i class="fa fa-tumblr"></i></a>
                                </li>
                                <li>
                                    <a class="instgram itl-tooltip" data-placement="bottom" title="Instagram" href="#"><i class="fa fa-instagram"></i></a>
                                </li>
                                <li>
                                    <a class="vimeo itl-tooltip" data-placement="bottom" title="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
                                </li>
                                <li>
                                    <a class="skype itl-tooltip" data-placement="bottom" title="Skype" href="#"><i class="fa fa-skype"></i></a>
                                </li>
                            </ul>
                            <!-- End Social Links -->
                        </div><!-- .col-md-6 -->
                    </div><!-- .row -->
                </div><!-- .container -->
            </div><!-- .top-bar -->
            <!-- End Top Bar -->
            
            
            <!-- Start  Logo & Naviagtion  -->
            <div class="navbar navbar-default navbar-top">
                <div class="container">
                    <div class="navbar-header">
                        <!-- Stat Toggle Nav Link For Mobiles -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <!-- End Toggle Nav Link For Mobiles -->
                        <a class="navbar-brand" href="index.html">
                            <img alt="" src="images/margo.png">
                        </a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <!-- Stat Search -->
                        <div class="search-side">
                            <a href="#" class="show-search"><i class="fa fa-search"></i></a>
                            <div class="search-form">
                                <form autocomplete="off" role="search" method="get" class="searchform" action="#">
                                    <input type="text" value="" name="s" id="s" placeholder="Search the site...">
                                </form>
                            </div>
                        </div>
                        <!-- End Search -->
                        <!-- Start Navigation List -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a class="active" href="index.html">Home</a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home Main Version</a>
                                    </li>
                                    <li><a class="active" href="index-01.html">Home Version 1</a>
                                    </li>
                                    <li><a href="index-02.html">Home Version 2</a>
                                    </li>
                                    <li><a href="index-03.html">Home Version 3</a>
                                    </li>
                                    <li><a href="index-04.html">Home Version 4</a>
                                    </li>
                                    <li><a href="index-05.html">Home Version 5</a>
                                    </li>
                                    <li><a href="index-06.html">Home Version 6</a>
                                    </li>
                                    <li><a href="index-07.html">Home Version 7</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">Pages</a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About</a>
                                    </li>
                                    <li><a href="services.html">Services</a>
                                    </li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a>
                                    </li>
                                    <li><a href="left-sidebar.html">Left Sidebar</a>
                                    </li>
                                    <li><a href="404.html">404 Page</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Shortcodes</a>
                                <ul class="dropdown">
                                    <li><a href="tabs.html">Tabs</a>
                                    </li>
                                    <li><a href="buttons.html">Buttons</a>
                                    </li>
                                    <li><a href="action-box.html">Action Box</a>
                                    </li>
                                    <li><a href="testimonials.html">Testimonials</a>
                                    </li>
                                    <li><a href="latest-posts.html">Latest Posts</a>
                                    </li>
                                    <li><a href="latest-projects.html">Latest Projects</a>
                                    </li>
                                    <li><a href="pricing.html">Pricing Tables</a>
                                    </li>
                                    <li><a href="animated-graphs.html">Animated Graphs</a>
                                    </li>
                                    <li><a href="accordion-toggles.html">Accordion & Toggles</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="portfolio-3.html">Portfolio</a>
                                <ul class="dropdown">
                                    <li><a href="portfolio-2.html">2 Columns</a>
                                    </li>
                                    <li><a href="portfolio-3.html">3 Columns</a>
                                    </li>
                                    <li><a href="portfolio-4.html">4 Columns</a>
                                    </li>
                                    <li><a href="single-project.html">Single Project</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="blog.html">Blog</a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog - right Sidebar</a>
                                    </li>
                                    <li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a>
                                    </li>
                                    <li><a href="single-post.html">Blog Single Post</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a>
                            </li>
                        </ul>
                        <!-- End Navigation List -->
                    </div>
                </div>
            </div>
            <!-- End Header Logo & Naviagtion -->
            
        </header> 
        <!-- End Header Section -->
        
        
        
        <!-- Start Home Page Slider -->
        <section id="home">
            <!-- Carousel -->
            <div id="main-slide" class="carousel slide" data-ride="carousel">

                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#main-slide" data-slide-to="0" class="active"></li>
                    <li data-target="#main-slide" data-slide-to="1"></li>
                    <li data-target="#main-slide" data-slide-to="2"></li>
                </ol>
                <!--/ Indicators end-->

                <!-- Carousel inner -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
                        <div class="slider-content">
                            <div class="col-md-12 text-center">
                                <h2 class="animated2">
                        		<span>Welcome to <strong>Margo</strong></span>
                        	</h2>
                                <h3 class="animated3">
                            	<span>The ultimate aim of your business</span>
                            </h3>
                                <p class="animated4"><a href="#" class="slider btn btn-primary">Check Now</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--/ Carousel item end -->
                    <div class="item">
                        <img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
                        <div class="slider-content">
                            <div class="col-md-12 text-center">
                                <h2 class="animated4">
                                <span><strong>Margo</strong> for the highest</span>
                            </h2>
                                <h3 class="animated5">
                            	<span>The Key of your Success</span>
                            </h3>	
                                <p class="animated6"><a href="#" class="slider btn btn-primary">Buy Now</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--/ Carousel item end -->
                    <div class="item">
                        <img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
                        <div class="slider-content">
                            <div class="col-md-12 text-center">
                                <h2 class="animated7 white">
                                <span>The way of <strong>Success</strong></span>
                            </h2>
                                <h3 class="animated8 white">
                            	<span>Why you are waiting</span>
                            </h3>	
                                <div class="">
                                    <a class="animated4 slider btn btn-primary btn-min-block" href="#">Get Now</a><a class="animated4 slider btn btn-default btn-min-block" href="#">Live Demo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Carousel item end -->
                </div>
                <!-- Carousel inner end-->

                <!-- Controls -->
                <a class="left carousel-control" href="#main-slide" data-slide="prev">
                    <span><i class="fa fa-angle-left"></i></span>
                </a>
                <a class="right carousel-control" href="#main-slide" data-slide="next">
                    <span><i class="fa fa-angle-right"></i></span>
                </a>
            </div>
            <!-- /carousel -->
        </section>
        <!-- End Home Page Slider -->
        
        
        <!-- Start Content -->
        <div id="content">
        
        
            <!-- Start Services Section -->
            <div class="container">
                <div class="row">

                    <!-- Start Service Icon 1 -->
                    <div class="col-md-4 col-sm-4 service-box service-icon-left-more">
                        <div class="service-icon">
                            <i class="fa fa-globe fa-4x"></i>
                        </div>
                        <div class="service-content">
                            <h4>Web Hosting</h4>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                        </div>
                    </div>
                    <!-- End Service Icon 1 -->

                      <!-- Start Service Icon 2 -->
                      <div class="col-md-4 col-sm-4 service-box service-icon-left-more">
                       <div class="service-icon">
                         <i class="fa fa-magic fa-4x"></i>
                       </div>
                       <div class="service-content">
                        <h4>Web Hosting</h4>
                        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                      </div>
                    </div>
                    <!-- End Service Icon 2 -->

                    <!-- Start Service Icon 3 -->
                    <div class="col-md-4 col-sm-4 service-box service-icon-left-more">
                        <div class="service-icon">
                            <i class="fa fa-rocket fa-4x"></i>
                        </div>
                        <div class="service-content">
                        <h4>Web Hosting</h4>
                        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                        </div>
                    </div>
                    <!-- End Service Icon 3 -->

                </div><!-- .row -->
            </div><!-- .container -->
            <!-- End Services Section -->
            
            
            
            
            <!-- Start Portfolio Section -->
            <div class="project">
            <div class="container">
                    <!-- Start Recent Projects Carousel -->
				<div class="recent-projects">
					<h4 class="title"><span>Recent Projects</span></h4>
					<div class="projects-carousel touch-carousel">
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" data-lightbox-type="ajax" href="https://vimeo.com/78468485">
										<div class="thumb-overlay"><i class="fa fa-play"></i></div>
										<img alt="" src="images/Portfolio/1.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/2.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Logo</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/3.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/4.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
										<span>Ilustration</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-02.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/5.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Logo</span>
										<span>Drawing</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/6.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a class="lightbox" title="This is an image title" href="images/portfolio-big-03.jpg">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/7.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Website</span>
									</a>
								</div>
							</div>
						</div>
						
						<div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/8.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/9.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/10.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/11.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
                        
                        <div class="portfolio-item item">
							<div class="portfolio-border">
								<div class="portfolio-thumb">
									<a href="#">
										<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
										<img alt="" src="images/Portfolio/12.png" />
									</a>
								</div>
								<div class="portfolio-details">
									<a href="#">
										<h4>Lorem Ipsum Dolor</h4>
										<span>Ilustration</span>
										<span>Animation</span>
									</a>
								</div>
							</div>
						</div>
						
					</div>
				</div>
				<!-- End Recent Projects Carousel -->
            </div><!-- .container -->
            </div>
            <!-- End Portfolio Section -->
            

            <!-- Divider -->
            <div class="hr1 margin-60"></div>
            
            
            <!-- Start News & Skill Section -->
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <!-- Classic Heading -->
                        <h4 class="classic-title"><span>Latest News</span></h4>
                        
                        <!-- Start Latest Posts -->
                        <div class="latest-posts-classic">
    
                            <!-- Post 1 -->
                            <div class="post-row">
                                <div class="left-meta-post">
                                    <div class="post-date"><span class="day">28</span><span class="month">Dec</span></div>
                                    <div class="post-type"><i class="fa fa-picture-o"></i></div>
                                </div>
                                <h3 class="post-title"><a href="#">Standard Post With Image</a></h3>
                                <div class="post-content">
                                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet <a class="read-more" href="#">Read More...</a></p>
                                </div>
                            </div>
  
                            <!-- Post 2 -->
                            <div class="post-row">
                                <div class="left-meta-post">
                                    <div class="post-date"><span class="day">26</span><span class="month">Dec</span></div>
                                    <div class="post-type"><i class="fa fa-picture-o"></i></div>
                                </div>
                                <h3 class="post-title"><a href="#">Gallery Post</a></h3>
                                <div class="post-content">
                                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="read-more" href="#">Read More...</a></p>
                                </div>
                            </div>

                        </div>
                        <!-- End Latest Posts -->
                    </div><!-- .col-md-6 -->
                    
                    <div class="col-md-6">
                        
                        <!-- Classic Heading -->
                        <h4 class="classic-title"><span>Our Skills</span></h4>
  
                        <div class="skill-shortcode">
                              <div class="skill">
                                <p>Web Design</p>          
                                <div class="progress">         
                                  <div class="progress-bar" role="progressbar"  data-percentage="60">
                                    <span class="progress-bar-span" >60%</span>
                                    <span class="sr-only">60% Complete</span>
                                  </div>
                                </div>  
                              </div>
                              <div class="skill">
                                <p>Wordpress</p>          
                                <div class="progress">          
                                  <div class="progress-bar" role="progressbar"  data-percentage="80">
                                    <span class="progress-bar-span" >80%</span>
                                    <span class="sr-only">60% Complete</span>
                                  </div>
                                </div>  
                              </div>
                              <div class="skill">
                                <p>CSS 3</p>          
                                <div class="progress">          
                                  <div class="progress-bar" role="progressbar"  data-percentage="90">
                                    <span class="progress-bar-span" >90%</span>
                                    <span class="sr-only">60% Complete</span>
                                  </div>
                                </div>  
                              </div>
                              <div class="skill">
                                <p>HTML 5</p>          
                                <div class="progress">          
                                  <div class="progress-bar" role="progressbar"  data-percentage="100">
                                    <span class="progress-bar-span" >100%</span>
                                    <span class="sr-only">60% Complete</span>
                                  </div>
                                </div>  
                              </div>                              
                        </div>
                        
                    </div><!-- .col-md-6 -->
                </div><!-- .row -->
            </div><!-- .container -->
            <!-- End News & Skill Section -->
            
            
            <!-- Divider -->
            <div class="hr1 margin-60"></div>
            
            
            <!-- Start Clients/Partner Section -->
            <div class="container">
                    <div class="our-clients">

                        <!-- Classic Heading -->
                        <h4 class="classic-title"><span>Our Clients</span></h4>

                        <div class="clients-carousel custom-carousel touch-carousel" data-appeared-items="5">

                            <!-- Client 1 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c1.png" alt="" /></a>
                            </div>

                            <!-- Client 2 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c2.png" alt="" /></a>
                            </div>

                            <!-- Client 3 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c3.png" alt="" /></a>
                            </div>

                            <!-- Client 4 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c4.png" alt="" /></a>
                            </div>

                            <!-- Client 5 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c5.png" alt="" /></a>
                            </div>

                            <!-- Client 6 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c6.png" alt="" /></a>
                            </div>

                            <!-- Client 7 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c7.png" alt="" /></a>
                            </div>

                            <!-- Client 8 -->
                            <div class="client-item item">
                                <a href="#"><img src="images/c8.png" alt="" /></a>
                            </div>

                        </div>
                    </div>
            </div><!-- .container -->
            <!-- End Clients/Partner Section -->




        </div>
        <!-- End Content -->




        <!-- Start Footer -->
        <footer>
            <div class="container">
                <div class="row footer-widgets">
    
                    <!-- Start Subscribe & Social Links Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget mail-subscribe-widget">
                            <h4>Get in touch<span class="head-line"></span></h4>
                            <p>Join our mailing list to stay up to date and get notices about our new releases!</p>
                            <form class="subscribe">
                                <input type="text" placeholder="mail@example.com">
                                <input type="submit" class="main-button" value="Send">
                            </form>
                        </div>
                        <div class="footer-widget social-widget">
                            <h4>Follow Us<span class="head-line"></span></h4>
                            <ul class="social-icons">
                                <li>
                                    <a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li>
                                    <a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a class="google" href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                                <li>
                                    <a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a>
                                </li>
                                <li>
                                    <a class="linkdin" href="#"><i class="fa fa-linkedin"></i></a>
                                </li>
                                <li>
                                    <a class="flickr" href="#"><i class="fa fa-flickr"></i></a>
                                </li>
                                <li>
                                    <a class="tumblr" href="#"><i class="fa fa-tumblr"></i></a>
                                </li>
                                <li>
                                    <a class="instgram" href="#"><i class="fa fa-instagram"></i></a>
                                </li>
                                <li>
                                    <a class="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
                                </li>
                                <li>
                                    <a class="skype" href="#"><i class="fa fa-skype"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Subscribe & Social Links Widget -->
                    
                    
                    <!-- Start Twitter Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget twitter-widget">
                            <h4>Twitter Feed<span class="head-line"></span></h4>
                            <ul>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.An Fusce eleifend aliquet nis application.</p>
                                    <span>26 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Twitter Widget -->


                    <!-- Start Flickr Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget flickr-widget">
                            <h4>Flicker Feed<span class="head-line"></span></h4>
                            <ul class="flickr-list">
                                <li>
                                    <a href="images/flickr-01.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-01.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-02.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-02.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-03.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-03.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-04.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-04.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-05.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-05.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-06.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-06.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-07.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-07.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-08.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-08.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-09.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-09.jpg">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Flickr Widget -->

                    
                    <!-- Start Contact Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget contact-widget">
                            <h4><img src="images/footer-margo.png" class="img-responsive" alt="Footer Logo" /></h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
                            <ul>
                                <li><span>Phone Number:</span> +01 234 567 890</li>
                                <li><span>Email:</span> company@company.com</li>
                                <li><span>Website:</span> www.yourdomain.com</li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Contact Widget -->
                	
                	
                </div> <!-- row -->

                <!-- Start Copyright -->
                <div class="copyright-section">
                    <div class="row">
                        <div class="col-md-6">
                            <p>&copy; 2014 Margo -  All Rights Reserved <a href="http://graygrids.com">GrayGrids</a> </p>
                        </div>
                        <div class="col-md-6">
                            <ul class="footer-nav">
                                <li><a href="#">Sitemap</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>						
                    </div>
                </div>
                <!-- End Copyright -->

            </div>
        </footer>
        <!-- End Footer -->

    </div>
    <!-- End Container -->

<!-- Go To Top Link -->
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>

<div id="loader">
 <div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</div>


</body>
</html>